Skip to main content

Content Security Policy (CSP)

What is CSP ?​

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks.

-- mdn Web Docs

CSP brings the concept of defense-in-depth to the client-side of web applications by adding another layer of protection over Same-Origin Policy to prevent attacks such as XSS, packet sniffing attacks, data injection attact, etc.

By injecting an additional header Content-Security-Policy into the respond header, clien-side agents are given explicit rules on what resources are allowed to load and where to load from for that page.

Using CSP​

Content Security Policy is configured by adding the Content-Security-Policy HTTP header to a response.

Content-Security-Policy: policy

Writing policy​

A policy should include a default-src policy directive, which is a fallback for other resource types when they don't have policies of their own.

// Disable unsafe inline/eval, only allow loading of resources (images, fonts, scripts, etc.) over https:
Content-Security-Policy: default-src https:

// only content from the site's own origin is allowed, excluding subdomains
Content-Security-Policy: default-src 'self'

// equivalent to previous policy
Content-Security-Policy: script-src 'self'; child-src 'self'; font-src 'self'; img-src 'self'; object-src 'self'....

// images from any origin are allowed, but restrict audio/video media from trusted providers, and all scripts from a specific server that hosts trusted code.
Content-Security-Policy: default-src 'self'; img-src *; media-src example.org example.net; script-src userscripts.example.com

// force all contents to be loaded with TLS
Content-Security-Policy: default-src https://onlinebanking.example.com

It can also be assigned through the meta tag.

<meta http-equiv="Content-Security-Policy" content="default-src https:" />

List of valid directives can be checked here.

Test policy and report on violation​

A Content-Security-Policy-Report-Only HTTP header can be specified to enable report-only mode. Policies assigend with this header won't be enforced, but report will be generated on policy violation and sent to a report url if provided with report-to policy directive. This can be useful for testing future versions of policy.

If both a Content-Security-Policy-Report-Only header and a Content-Security-Policy header are present in the same response, both policies are honored.

Content-Security-Policy-Report-Only: default-src https:; report-to /csp-violation-report-endpoint/

A browser capable of reporting CSP violations will send the report as an json object in a HTTP POST request with content-type header set to application/csp-report.

Check third-party resources with Subresource Integrity(SRI)​

When allowing third-party resources such as CDN, Subresource Integrity(SRI) is an additional sercurity feature that can be used to verify that the fetched resources are delivered without unexpected manipulation.

Refer to Mdn Web Docs for further reading on this topic.

References​